import React from 'react';
import {ScrollView, View, Text} from 'react-native';
import Button from '../../components/button';
import ThemeStyles from '../../styles';
import Styles from './styles';
import {
  FixedParams,
  ParamNames,
  ProductFieldToCategoryMapping,
  ProductParams,
  ProductType,
  RemvArchParams,
} from '../../reducers/constant';
import {getRealSize, Touchable} from '../../utils';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {I18n} from '../../reducers/intl';

export default class FilterPanel extends React.Component {
  static propTypes = {
    products: PropTypes.object,
    values: PropTypes.object,
    onSelected: PropTypes.func,
    onApply: PropTypes.func,
    onReset: PropTypes.func,
  };

  static defaultTypes = {
    products: [],
    values: [],
    onSelected: () => {},
    onApply: () => {},
    onReset: () => {},
  };

  constructor() {
    super();
    this.state = {
      fixed: {},
      remvArch: {},
      product: {
        id: '',
        type: '',
        name: '',
      },
    };
  }

  onSelectedItem = (field, value) => {
    const {onSelected} = this.props;
    onSelected(field, value);
  };

  render() {
    const {products, values, onApply, onReset} = this.props;

    const params = values.type ? Object.values(ProductParams[values.type]) : [];
    const productInfo =
      values.type === ProductType.fixed
        ? products.fixedproduct.find(p => p.name === values.product)
        : products.remvarchproduct.find(p => p.name === values.product);
    let hasMetalType = false;
    if (
      productInfo &&
      values.type === ProductType.fixed &&
      values.materials &&
      values.materials.length
    ) {
      const selectMaterial = productInfo.materials.find(
        m => m.id === values.materials[0],
      );
      hasMetalType = selectMaterial ? selectMaterial.has_metal_type : false;
    }

    const availWeeks = [
      {id: 1, name: I18n.t('options.week.1')},
      {id: 4, name: I18n.t('options.week.4')},
      {id: 12, name: I18n.t('options.week.12')},
    ];

    return (
      <View
        style={[
          ThemeStyles.Color.background.white,
          ThemeStyles.divider.horizontal,
          ThemeStyles.Layout.flex['1'],
        ]}>
        <ScrollView>
          <View style={[ThemeStyles.Layout.base.mt]}>
            <Text style={[ThemeStyles.Layout.small.mh]}>
              {I18n.t('product.name')}
            </Text>
            <View style={Styles.productCardContainer}>
              {products.fixedproduct.map(product => (
                <ParamsBlock
                  key={`${product.id}-${product.type}`}
                  text={`${product.id}-${product.type}`}
                  {...product}
                  selected={_.includes(values, product.name)}
                  onSelected={() => {
                    this.onSelectedItem('product', product.name);
                    this.onSelectedItem('type', ProductType.fixed);
                  }}
                />
              ))}
              {products.remvarchproduct.map(product => (
                <ParamsBlock
                  key={`${product.id}-${product.type}`}
                  text={`${product.id}-${product.type}`}
                  {...product}
                  selected={_.includes(values, product.name)}
                  onSelected={() => {
                    this.onSelectedItem('product', product.name);
                    this.onSelectedItem('type', ProductType.remvArch);
                  }}
                />
              ))}
            </View>
          </View>
          {productInfo && values.type && values.type === ProductType.fixed ? (
            <View>
              <Text style={[ThemeStyles.Layout.small.mh]}>
                {I18n.t('product.params.materials')}
              </Text>
              <View style={Styles.productCardContainer}>
                {productInfo.materials.map(item => (
                  <ParamsBlock
                    key={`materials-${item.id}`}
                    text={item.name}
                    {...item}
                    selected={_.includes(values.materials, item.id)}
                    onSelected={() => this.onSelectedItem('materials', item.id)}
                  />
                ))}
              </View>
            </View>
          ) : null}
          <View>
            <Text style={[ThemeStyles.Layout.small.mh]}>
              {I18n.t('form.label.week')}
            </Text>
            <View style={Styles.productCardContainer}>
              {availWeeks.map(week => (
                <ParamsBlock
                  key={week.id}
                  text={week.name}
                  {...week}
                  selected={week.id === values.avail}
                  onSelected={() => this.onSelectedItem('avail', week.id)}
                />
              ))}
            </View>
          </View>
        </ScrollView>
        <View
          style={[
            ThemeStyles.Layout.flex.row,
            ThemeStyles.Layout.flex.end,
            ThemeStyles.Layout.small.mv,
          ]}>
          <Button
            label={I18n.t('button.reset')}
            type="ghost"
            style={{marginRight: getRealSize(8), width: getRealSize(98)}}
            size="middle"
            width={58}
            onPress={() => onReset()}
          />
          <Button
            onPress={() => onApply()}
            label={I18n.t('button.confirm')}
            style={{marginRight: getRealSize(8), width: getRealSize(98)}}
            size="middle"
            width={58}
          />
        </View>
      </View>
    );
  }
}

const ParamsBlock = props => (
  <Touchable onPress={() => props.onSelected(props.name)}>
    <View
      style={
        props.selected ? Styles.productCardBoxSelected : Styles.productCardBox
      }>
      <Text
        style={
          props.selected
            ? Styles.productCardLabelSelected
            : Styles.productCardLabel
        }>
        {props.name}
      </Text>
    </View>
  </Touchable>
);

/**
{productInfo &&
values.type &&
values.type === ProductType.remvArch &&
productInfo.has_metal ? (
    <View>
      <Text style={[ThemeStyles.Layout.small.mh]}>
        {I18n.t('product.params.metals')}
      </Text>
      <View style={Styles.productCardContainer}>
        {products[ProductFieldToCategoryMapping.remvArch.metals].map(
            item => (
                <ParamsBlock
                    key={`metals-${item.id}`}
                    text={item.name}
                    {...item}
                    selected={_.includes(values.metals, item.id)}
                    onSelected={() => this.onSelectedItem('metals', item.id)}
                />
            ),
        )}
      </View>
    </View>
) : null}
{productInfo &&
values.type &&
values.type === ProductType.fixed &&
hasMetalType ? (
    <View>
      <Text style={[ThemeStyles.Layout.small.mh]}>
        {I18n.t('product.params.metal_types')}
      </Text>
      <View style={Styles.productCardContainer}>
        {products[ProductFieldToCategoryMapping.fixed.metal_types].map(
            item => (
                <ParamsBlock
                    key={`metal_types-${item.id}`}
                    text={item.name}
                    {...item}
                    selected={_.includes(values.metal_types, item.id)}
                    onSelected={() =>
                        this.onSelectedItem('metal_types', item.id)
                    }
                />
            ),
        )}
      </View>
    </View>
) : null}
**/
